<template>
  <view class="container">
	   <view class="season-switch">
	        <uni-data-select
	          v-model="selectedSeasonId"
	          :localdata="seasonOptions"
	          placeholder="请选择赛季"
	          @change="handleSeasonChange"
	          class="season-select"
			  :clear="false"
	        >
	        </uni-data-select>
	      </view>
	  <view  class="season-info">
	        <text class="season-title">当前赛季：{{currentSeason.seasonName  }} (第{{ selectedSeasonId }}赛季)</text>
	      </view>
    <!-- 当前用户卡片 -->
    <view v-if="currentRank" class="user-card">
     <view class="avatar-box">
        <image :src="currentRank.avatar==null?'/static/mine.png':getBaseUrl+currentRank.avatar " class="avatar" />
        <text class="rank-tag">NO.{{ currentRank.rank }}</text>
      </view>
      <view class="info">
        <text class="name">{{ currentUser.nickName || currentUser.userName }}</text>
        <view class="score-box">
          <uni-icons type="star-filled" size="18" color="#ffd700" />
          <text class="score">{{ currentUser.totalScore }} 积分</text>
        </view>
      </view>
    </view>

    <!-- 排行榜主体 -->
    <scroll-view 
      scroll-y 
      class="rank-list" 
      :refresher-enabled="false"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 前三名奖台 -->
      <view v-if="top3.length > 0" class="podium">
        <view v-for="(item, index) in top3" :key="item.userId" 
              :class="['podium-item', `podium-${index + 1}`]" @click="gotoRankDetail(item.userId,item.nickName)">
          <image v-if="index < 3" :src="`/static/rank-${index + 1}.png`" class="medal" />
          <image :src="item.avatar || '/static/default-avatar.png'" class="podium-avatar" />
          <text class="podium-name">{{ item.nickName || item.userName }}</text>
          <text class="podium-score">{{ item.totalScore }}</text>
        </view>
      </view>

      <!-- 常规排名列表 -->
      <view v-for="(item, index) in otherList" 
            :key="item.userId" 
            class="rank-item"
            :class="{ current: item.userId === currentUserId }" @click="gotoRankDetail(item.userId,item.nickName)">
        <text class="order">{{ index + 4 }}</text>
        <image :src="item.avatar || '/static/default-avatar.png'" class="avatar" />
        <view class="user-info">
          <text class="name">{{ item.nickName || item.userName }}</text>
          <text class="department" v-if="item.deptName">{{ item.deptName }}</text>
        </view>
        <view class="score-box">
          <text class="score">{{ item.totalScore }}</text>
          <text class="unit">分</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <uni-icons type="spinner-cycle" size="20" class="loading-icon" />
        加载中...
      </view>
      
      <!-- 未上榜提示 -->
      <view v-if="!currentRank && !loading" class="empty-tip">
        <image src="/static/empty-rank.png" class="empty-img" />
        <text class="tip-text">您尚未上榜，快去获取积分吧！</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {computed, onMounted, ref } from 'vue'
import { http } from '@/utils/requestUtil'

import getBaseUrl from '../../../utils/baseUrl.js'
const userInfo = uni.getStorageSync('userInfo')
const currentUserId = userInfo.userId 

const rawData = ref([])
const loading = ref(false)
const refreshing = ref(false)
const seasonInfo = ref([{seasonId:1,seasonName:"di"}])
const selectedSeasonId = ref('') // 当前选中赛季ID
const seasonOptions = computed(() => 
  seasonInfo.value.map(s => ({ value: s.seasonId, text: s.seasonName }))
)
const currentSeason = computed(() => 
  seasonInfo.value.find(s => s.seasonId === selectedSeasonId.value)
)
const gotoRankDetail=(userId,name)=>{
	console.log(name)
	console.log(userId)
	uni.navigateTo({
		url:`/pages/integration/integarlRankDetail/integarlRankDetail?userId=${userId}&seasonId=${selectedSeasonId.value}
		&name=${name}`
	})
}
// 处理后的排行榜数据
const processedList = computed(() => {
  let rank = 1
  return rawData.value
    .sort((a, b) => b.totalScore - a.totalScore)
    .map((item, index, arr) => {
      if (index > 0 && arr[index-1].totalScore !== item.totalScore) {
        rank = index + 1
      }
      return { ...item, rank }
    })
})
// 赛季切换处理
const handleSeasonChange = (val) => {
  selectedSeasonId.value = val
  console.log(val)
  loadData()
}
// 当前用户信息
const currentRank = ref(null)

const currentUser = computed(() => {
  return processedList.value.find(item => item.userId === currentUserId) || {}
})

// 前三名数据
const top3 = computed(() => processedList.value.slice(0, 3))

// 其他排名数据
const otherList = computed(() => processedList.value.slice(3))

// 加载数据
const loadSeason =async()=>{
	//获取赛季信息
	const resSeasonInfo = await http.get('/bole/season/list')
	
	seasonInfo.value=resSeasonInfo.rows
	selectedSeasonId.value =resSeasonInfo.rows[seasonInfo.value.length-1].seasonId
	console.log(seasonInfo.value)
	loadData()
}
const loadData = async () => {
  try {
	  // console.log(currentUserId)
	 
    loading.value = true
    const res = await http.get('/bole/application/rank?offset=0&pageSize=50&seasonId='+selectedSeasonId.value)
    rawData.value = res.data || []
	// console.log(res.data.length)
	const a = res.data.length
	// currentRank = res.data.find(item => item.userId === currentUserId)
	 for(let i = 0;i < a;i++){
		if(res.data[i].userId == currentUserId){
		
			currentRank.value=res.data[i]
				console.log(res.data[i])
			currentRank.value.rank=i+1
		}
	 }
  } catch (e) {
	  console.log(e)
    uni.showToast({ title: '数据加载失败', icon: 'none' })
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  loadSeason()
}

onMounted(() => {
  loadSeason()
})
</script>

<style>
	.container {
	    padding: 20rpx;
	    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
	    min-height: 100vh;
	}
	
	.user-card {
	    background: #ffffff;
	    border-radius: 24rpx;
	    padding: 30rpx;
	    margin: 20rpx;
	    display: flex;
	    align-items: center;
	    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
	}
	
	.user-card .avatar-box {
	    position: relative;
	}
	
	.user-card .avatar-box .avatar {
	    width: 120rpx;
	    height: 120rpx;
	    border-radius: 50%;
	    border: 4rpx solid #fff;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-card .avatar-box .rank-tag {
	    position: absolute;
	    bottom: -10rpx;
	    left: 50%;
	    transform: translateX(-50%);
	    background: #409EFF;
	    color: #fff;
	    padding: 6rpx 20rpx;
	    border-radius: 40rpx;
	    font-size: 24rpx;
	}
	
	.user-card .info {
	    margin-left: 30rpx;
	    flex: 1;
	}
	
	.user-card .info .name {
	    font-size: 36rpx;
	    color: #333;
	    font-weight: 500;
	}
	
	.user-card .info .score-box {
	    margin-top: 15rpx;
	    display: flex;
	    align-items: center;
	}
	
	.user-card .info .score-box .score {
	    color: #409EFF;
	    font-size: 32rpx;
	    margin-left: 10rpx;
	}
	
	.podium {
	    display: flex;
	    justify-content: space-around;
	    align-items: flex-end;
	    height: 380rpx;
	    margin: 40rpx 20rpx;
	}
	
	.podium .podium-item {
	    position: relative;
	    width: 30%;
	    background: #fff;
	    border-radius: 16rpx 16rpx 0 0;
	    padding: 30rpx;
	    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	}
	
	.podium .podium-item.podium-1 {
	    height: 300rpx;
	    background: linear-gradient(180deg, #fff4d9 0%, #ffffff 100%);
	}
	
	.podium .podium-item.podium-2 {
	    height: 240rpx;
	    background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
	}
	
	.podium .podium-item.podium-3 {
	    height: 200rpx;
	    background: linear-gradient(180deg, #fde3d4 0%, #ffffff 100%);
	}
	
	.podium .podium-item .medal {
	    position: absolute;
	    top: -50rpx;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 80rpx;
	    height: 80rpx;
	    z-index: 2;
	}
	
	.podium .podium-item .podium-avatar {
	    width: 100rpx;
	    height: 100rpx;
	    border-radius: 50%;
	    border: 2rpx solid #fff;
	    position: absolute;
	    top: -60rpx;
	    left: 50%;
	    transform: translateX(-50%);
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.podium .podium-item .podium-name {
	    display: block;
	    text-align: center;
	    font-size: 28rpx;
	    color: #333;
	    margin-top: 60rpx;
	}
	
	.podium .podium-item .podium-score {
	    display: block;
	    text-align: center;
	    font-size: 40rpx;
	    color: #409EFF;
	    font-weight: bold;
	    margin-top: 20rpx;
	}
	
	.rank-item {
	    background: #fff;
	    border-radius: 16rpx;
	    margin: 20rpx;
	    padding: 30rpx;
	    display: flex;
	    align-items: center;
	    transition: all 0.2s;
	}
	
	.rank-item.current {
	    background: #f5f9ff;
	    border: 2rpx solid #409EFF;
	}
	
	.rank-item .order {
	    width: 80rpx;
	    text-align: center;
	    font-size: 36rpx;
	    color: #999;
	}
	
	.rank-item .avatar {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    margin: 0 20rpx;
	}
	
	.rank-item .user-info {
	    flex: 1;
	}
	
	.rank-item .user-info .name {
	    font-size: 32rpx;
	    color: #333;
	}
	
	.rank-item .user-info .department {
	    font-size: 24rpx;
	    color: #999;
	    margin-top: 8rpx;
	}
	
	.rank-item .score-box {
	    min-width: 120rpx;
	    text-align: right;
	}
	
	.rank-item .score-box .score {
	    font-size: 36rpx;
	    color: #409EFF;
	    font-weight: bold;
	}
	
	.rank-item .score-box .unit {
	    font-size: 24rpx;
	    color: #999;
	    margin-left: 4rpx;
	}
	
	.loading {
	    text-align: center;
	    padding: 40rpx;
	    color: #999;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.loading-loading-icon {
	    animation: rotate 1s linear infinite;
	    margin-right: 10rpx;
	}
	
	.empty-tip {
	    text-align: center;
	    padding: 100rpx 0;
	}
	
	.empty-tip .empty-img {
	    width: 300rpx;
	    height: 300rpx;
	    opacity: 0.6;
	}
	
	.empty-tip .tip-text {
	    display: block;
	    color: #999;
	    margin-top: 20rpx;
	}
	
	@keyframes rotate {
	    from {
	        transform: rotate(0deg);
	    }
	    to {
	        transform: rotate(360deg);
	    }
	}    
	/* 新增赛季信息样式 */
	.season-info {
	  background: #f5f9ff;
	  border-radius: 16rpx;
	  padding: 24rpx;
	  margin: 20rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color: #409EFF;
	  font-weight: 500;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}
	
	.season-title {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.season-title::before {
	  content: '';
	  width: 32rpx;
	  height: 32rpx;
	  /* background: url(/static/season-icon.png) no-repeat center/cover; */
	  margin-right: 16rpx;
	}
	.season-switch {
	  padding: 20rpx;
	  background: #ffffff;
	  border-radius: 16rpx;
	  margin: 20rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}
	
	.season-select {
	  height: 80rpx;
	  font-size: 32rpx;
	  color: #666;
	}
	
	.season-info {
	  padding: 20rpx;
	  margin: 0 20rpx 20rpx;
	  background: #f8f9fc;
	  border-radius: 16rpx;
	  font-size: 32rpx;
	  color: #409EFF;
	  display: flex;
	  align-items: center;
	  gap: 16rpx;
	}
	
	.season-title {
	  display: flex;
	  align-items: center;
	  gap: 8rpx;
	}
</style>